<template>
  <div
    ref="customForm"
    class="custom-van-table"
  >
    <FieldLabel :label="label">
      <template
        v-if="!isFormComponent"
      >
        <NoDataAvailable />
      </template>
      <div
        v-else
        class="van-table"
      >
        <div
          v-for="(r, index) in formComponent"
          :key="r.id"
          class="van-table-container"
        >
          <div
            class="table-content"
          >
            <div
              class="row-list"
            >
              <FieldLabel :label="`序号${index + 1}`" />
              <TableColumn
                ref="tableColumn"
                :columns="r.row"
                :order="index"
              >
                <div
                  v-if="!can_do && deleteButton"
                  class="van-button"
                >
                  <van-button
                    class="van-button-delete"
                    plain
                    :disabled="isMinRow"
                    @click="deleteRow({ id: r.id })"
                  >
                    删除
                  </van-button>
                </div>
              </TableColumn>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="!can_do && addButton"
        class="custom-table-operation"
      >
        <div class="van-button">
          <van-button
            class="van-button-add"
            :disabled="isMaxRow"
            @click="addRow"
          >
            <!-- {{ label }}（{{ formComponent.length }}） -->
            新增
          </van-button>
        </div>
      </div>
    </FieldLabel>
  </div>
</template>

<script>
import TableColumn from './components/TableColumn';
import field from '../mixins/field';
import model from '../mixins/model';
import table from '../mixins/table';

export default {
  name: 'CustomVanTable',

  components: {
    TableColumn
  },

  mixins: [field, model(), table]
};
</script>

<style lang="scss" scoped>
.van-table-container {
  padding: $padding-xs;
  background: #ffffff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.16);
  margin-bottom: $margin-xs;
}
.van-button {
  width: 100%;
  &-add {
    background-color: $theme-color;
    color: #fff;
    border-radius: $b-radius-xs;
  }
  &-delete {
    color: $theme-color;
    border-color: $theme-color;
    border-radius: $b-radius-xs;
  }
}
</style>
